'use client';

import { useWeatherStore } from '@/store/weatherStore';
import { IconDroplet, IconWind, IconEye, IconGauge } from '@tabler/icons-react';

export default function WeatherDetails() {
    const weather = useWeatherStore((state) => state.currentWeather);

    if (!weather) return null;

    const details = [
        {
            icon: IconDroplet,
            label: '湿度',
            value: `${weather.humidity}%`
        },
        {
            icon: IconWind,
            label: '风速',
            value: `${weather.windSpeed} m/s`
        },
        {
            icon: IconEye,
            label: '能见度',
            value: `${weather.visibility} km`
        },
        {
            icon: IconGauge,
            label: '气压',
            value: `${weather.pressure} hPa`
        }
    ];

    return (
        <div className="bg-white/80 backdrop-blur-md rounded-2xl p-6 shadow-lg">
            <h3 className="text-lg font-medium mb-4">天气详情</h3>
            <div className="grid grid-cols-2 gap-6">
                {details.map(({ icon: Icon, label, value }) => (
                    <div key={label} className="flex items-center gap-3">
                        <Icon size={24} className="text-gray-600" />
                        <div>
                            <p className="text-sm text-gray-500">{label}</p>
                            <p className="font-medium">{value}</p>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}